<template>
  <div id="home">
    <div class="PageHeader">
      <div class="left">
        <el-image
          class="img"
          fit="scale-down"
          src="http://destiny001.gitee.io/admin-dist/img/logo.b5a855ee.png"
        >
        </el-image>
        <span class="text">
            杭州25期后台管理系统
      </span>
      </div>
      <el-button class="button" @click="onLogout">退出</el-button>
    </div>
    <div id="leftFlax">
      <div>
        <button :style="{width:long}" class="buttonShow" @click="isShow">|||</button>
        <el-radio-group v-show="false" v-model="isCollapse">
          <el-radio-button ref="btn1" :label="false"></el-radio-button>
          <el-radio-button ref="btn2" :label="true"></el-radio-button>
        </el-radio-group>
        <el-menu
          :collapse="isCollapse"
          :collapse-transition="false"
          :default-active="active"
          active-text-color="#409EFF"
          background-color="#333744"
          class="el-menu-vertical-demo"
          router
          text-color="#fff"
          unique-opened
          @select="select"
        >
          <el-submenu v-for="(item,index) in list" :key="item.id" :index="`${item.order}`">
            <template slot="title">
              <i :class="{
                'el-icon-s-custom':index===0,
                'el-icon-s-tools':index===1,
                'el-icon-s-goods':index===2,
                'el-icon-s-order':index===3,
                'el-icon-s-marketing':index===4
              }"></i>
              <span>{{ item.authName }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item v-for="value in item.children"
                            :key="value.id"
                            :index="value.path"
                            :route="'/'+value.path"
              >
                <i class="el-icon-menu"></i>
                <span>{{ value.authName }}</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </div>
      <div style="padding: 20px!important;width: 100%;overflow-x: hidden;">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item v-for="(item,index) in authName" :key="index">
            {{ item === '商品列表' ? $router.history.current.name === 'addGoods' ? '添加商品' : '商品列表' : item }}
          </el-breadcrumb-item>
        </el-breadcrumb>
        <div class="table">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { menus } from '@/api/login'
import { mapState } from 'vuex'

export default {
  name: 'welcome',
  computed: {
    ...mapState(['authName'])
  },
  data () {
    return {
      isCollapse: false,
      long: '200px',
      list: [],
      active: sessionStorage.getItem('active')
    }
  },
  methods: {
    // 退出登录
    onLogout () {
      this.$store.commit('setUser', null)
      this.$router.push('/login')
    },
    // 侧边导航展开收缩
    isShow () {
      this.long = this.long === '64px' ? '200px' : '64px'
      if (!this.isCollapse) {
        this.$refs.btn2.$el.click()
      } else {
        this.$refs.btn1.$el.click()
      }
    },
    // 获取标题名
    select (active, index) {
      // console.log(this.list[index[0] - 1])
      // console.log(this.list[index[0] - 1].authName)
      const arr = this.list[index[0] - 1].children.filter(item => {
        return item.path === index[1]
      })
      // console.log(arr[0].authName)
      const name = [this.list[index[0] - 1].authName, arr[0].authName]
      // console.log(name)
      this.$store.commit('setAuthName', name)
      // console.log(active)
      sessionStorage.setItem('active', active)
    }
  },
  created () {
    // 获取侧边导航信息
    menus().then(res => {
      // console.log(1)
      this.list = res.data
      // console.log(res.data)
    })
  }
}
</script>

<style lang="less" scoped>
#home {
  height: 100%;
  background-color: #eaedf1;
  padding-bottom: 60px;

  .PageHeader {
    background-color: #373d41;
    padding: 0 20px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      display: flex;
      align-items: center;

      .img {
        width: 61px;
        height: 56px;
      }

      .text {
        font-size: 25px;
        margin-left: 8px;
        color: #fff;
      }
    }

  }

  #leftFlax {
    display: flex;
    height: 100%;

    /deep/ .el-menu-vertical-demo {
      overflow: hidden;
    }

    /deep/ .el-breadcrumb {
      margin-bottom: 15px;
    }

    .table {
      padding: 20px !important;
      background: #fff;
    }
  }

  .buttonShow {
    border: 0;
    background-color: #666;
    width: 100%;
    height: 40px;
    border-right: 1px solid #eaedf1;
    letter-spacing: 5px;
    color: #fff;
    font-size: 20px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
  }

  .el-menu-vertical-demo {
    height: 100%;

    /deep/ .el-menu-item-group__title {
      padding: 0;
    }
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }

}
</style>
